<script setup>
import {onMounted, ref, watch} from 'vue'
import {
  addFoodArticle,
  deleteFoodArticle,
  getFoodArticleByAuthor,
  getFoodArticleDetail,
  updateFoodArticle
} from "@/api/food.js";
import WangEditorView from "@/components/WangEditorView.vue";
import {UploadFilled} from "@element-plus/icons-vue";
import {baseUrl} from "@/utils/request.js";
import {ElNotification} from "element-plus";
import {getTypeList} from "@/api/type.js";

const articleList = ref([]);
const dialogVisible = ref(false);
const updateForm = ref({});
const uploadUrl = ref(baseUrl + '/file/upload')
const typeList = ref([])

onMounted(() => {
  getFoodArticleByAuthor().then(response => {
    articleList.value = response.data;
  });
});

const getStatusColor = (status) => {
  switch (status) {
    case '审核中':
      return 'blue';
    case '已通过':
      return 'green';
    case '未通过':
      return 'red';
    default:
      return 'gray';
  }
};

const openEditDialog = (id) => {
  dialogVisible.value = true;
  getArticleDetail(id);
  getTypeListHandler();
};

const getArticleDetail = (id) => {
  // 这里是获取文章详情的 API 接口
  getFoodArticleDetail(id).then(res => {
    updateForm.value = res.data;
  });
};

const handleSubmit = () => {
  console.log(updateForm.value)
  updateFoodArticle(updateForm.value).then(response => {
    ElNotification({
      title: '修改保存成功',
      message: '文章修改保存成功',
      type:'success'
    });
    dialogVisible.value = false;
  }).catch(error => {
    console.log(error);
    ElNotification({
      title: '修改保存失败',
      message: '文章修改保存失败',
      type: 'error'
    });
  })
}

const handleSuccess = (response) => {
  if (response) {
    console.log(response);
    updateForm.value.imageUrl = response.data;
    console.log(updateForm.value.imageUrl);
    ElNotification({
      title: '上传成功',
      message: '图片上传成功',
      type:'success'
    });
  }
};

const handleError = (error) => {
  console.log(error);
  ElNotification({
    title: '上传失败',
    message: '图片上传失败',
    type: 'error'
  });
}

const getTypeListHandler = () => {
  getTypeList().then(response => {
    typeList.value = response.data
  });
}

const handleDelete = (id) => {
  // 这里是删除文章的 API 接口
  deleteFoodArticle(id).then(response => {
    ElNotification({
      title: '删除成功',
      message: '文章删除成功',
      type:'success'
    });
    getFoodArticleByAuthor().then(response => {
      articleList.value = response.data;
    });
  }).catch(error => {
    console.log(error);
    ElNotification({
      title: '删除失败',
      message: '文章删除失败',
      type: 'error'
    });
  })
}

// 监听 form.bankuai 的变化
watch(
    () => updateForm.value.bankuai,
    (newVal, oldVal) => {
      if (updateForm.value.type) {
        delete updateForm.value.type;
      }

    }
);

</script>

<template>
  <div>
    <el-dialog title="编辑文章" v-model="dialogVisible" destroy-on-close width="70vw">
      <el-row>
        <el-col :span="14" :offset="5">
          <div class="add-article-item">
            <h3>文章标题</h3>
            <el-input type="text" v-model="updateForm.title" placeholder="请输入文章标题" style="width: 100%"/>
          </div>
          <div class="add-article-item">
            <h3>文章封面</h3>
            <el-upload
                class="upload-demo"
                drag
                :action="uploadUrl"
                :on-success="handleSuccess"
                :on-error="handleError"
                :show-file-list="false"
            >
              <el-icon class="el-icon--upload">
                <upload-filled/>
              </el-icon>
              <div class="el-upload__text">
                将文件拖放到此处或<em>单击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  图片大小小于 5MB 的 JPG/PNG 文件
                </div>
              </template>
            </el-upload>
            <div class="image-preview" v-if="updateForm.imageUrl">
              <img :src="updateForm.imageUrl" alt="图片预览" style="width: 100%"/>
            </div>
          </div>
          <div class="add-article-item">
            <h3>文章简介</h3>
            <el-input type="textarea" v-model="updateForm.description" placeholder="请输入文章简介" :rows="4"
                      style="width: 100%"/>
          </div>
          <div class="add-article-item">
            <el-row :gutter="20">
              <el-col :span="12">
                <h3>文章板块</h3>
                <el-select v-model="updateForm.bankuai" placeholder="请选择文章板块">
                  <el-option label="美食乐园" value="美食乐园"></el-option>
                  <el-option label="饮食健康" value="饮食健康"></el-option>
                  <el-option label="烹饪技巧" value="烹饪技巧"></el-option>
                </el-select>
              </el-col>
              <el-col :span="12" v-if="updateForm.bankuai === '美食乐园'">
                <h3>文章分类</h3>
                <el-select v-model="updateForm.type" placeholder="请选择文章分类">
                  <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <div class="add-article-item">
            <h3>文章内容</h3>
            <WangEditorView v-model="updateForm.content"/>
          </div>
          <div class="add-article-item" style="margin-top: 40px">
            <el-button type="primary" @click="handleSubmit" style="width: 100%">保存修改</el-button>
          </div>
        </el-col>
      </el-row>

    </el-dialog>
    <el-table :data="articleList" border>
      <el-table-column prop="title" label="文章标题"/>
      <el-table-column label="文章大图" width="150px">
        <template #default="scope">
          <img :src="scope.row.imageUrl" style="width: 100px; height: 100px;" alt="图片加载失败"/>
        </template>
      </el-table-column>
      <el-table-column label="文章简介">
        <template #default="scope">
          <div style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
            {{ scope.row.description }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间"/>
      <el-table-column prop="shenheTime" label="审核时间"/>
      <el-table-column label="审核状态">
        <template #default="scope">
          <span :style="{ color: getStatusColor(scope.row.shenheStatus) }">{{ scope.row.shenheStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button v-if="scope.row.shenheStatus !== '已通过'" type="primary" @click="openEditDialog(scope.row.id)">编辑</el-button>
          <el-button v-if="scope.row.shenheStatus !== '已通过'" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>

</style>
